<template>
  <!--  input select picker-->
  <el-form
    ref="form"
    :model="data"
    :rules="rules"
    :inline="inline || false"
    :label-width="initLabelWidth(labelWidth)"
  >
    <el-form-item
      v-for="item in items"
      :key="item.label"
      :prop="item.prop"
      :label="item.label + '：'"
    >
      <el-input
        v-if="item.type === 'input'"
        v-model="data[item.prop]"
        :placeholder="item.props.placeholder || '请输入'"
        :disabled="item.props.disabled || false"
        :readonly="item.props.readonly || false"
      ></el-input>
      <el-select
        v-if="item.type === 'select'"
        v-model="data[item.prop]"
        :placeholder="item.props.placeholder || '请选择'"
        :disabled="item.props.disabled || false"
        :readonly="item.props.readonly || false"
        style="width: 100%;"
      >
        <el-option
          v-for="i in item.props.list"
          :key="i.value"
          :label="i.label"
          :value="i.value"
        ></el-option>
      </el-select>
      <el-switch
        v-if="item.type === 'switch'"
        v-model="data[item.prop]"
        :disabled="item.props.disabled || false"
        :readonly="item.props.readonly || false"
      ></el-switch>
      <el-date-picker
        v-if="item.type === 'date'"
        v-model="data[item.prop]"
        :disabled="item.props.disabled || false"
        :readonly="item.props.readonly || false"
        type="date"
        :placeholder="item.props.placeholder || '请选择日期'"
        style="width: 100%;"
      ></el-date-picker>
    </el-form-item>
    <el-form-item>
      <div class="submit-btn">
        <el-button size="mini" type="primary" @click="submit">submit</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>

  export default {
    name: "FormList",
    props: {
      data: Object,
      items: Array,
      inline: Boolean,
      labelWidth: Number
    },
    data() {
      return {
      };
    },
    computed: {
      rules() {
        let rules = this.items.reduce((map, i) => {
          if (i.rules) {
            map[i.prop] = i.rules
          }
          return map
        }, {});
        return rules
      },
      initLabelWidth() {
        return (width) => {
          let indexWidth = "auto";
          width ? indexWidth = width + 'px' : indexWidth;
          return indexWidth;
        };
      }
    },

    watch: {},
    mounted() {
    },
    methods: {
      async submit() {
        const valid = await this.validate();
        valid ? this.msgSuccess('submit!') : this.msgError('error submit!!')
      },

      validate() {
        return new Promise((resolve) => {
          this.$refs['form'].validate(resolve)
        })
      },

      clearValidate() {
        this.$refs['form'].clearValidate();
      },
    }
  };
</script>
<style lang="scss" scoped>

</style>

